<template>
  <div class="box-full m-relative">
    <div class="m-absolute b-0 w-full t-0 box-border p-14">
      <a-scrollbar style="height: 100%; overflow-y: auto; overflow-x: hiddeh">
        <a-form ref="formRef" :model="form" size="medium" auto-label-width>
          <a-form-item label="自定义链接：" field="platformId">
            <a-radio-group v-model="form.platformId" class="mt-4" @change="onPlatformIdChange">
              <a-radio v-for="item in platformList" :key="item.platformId" :value="item.platformId">{{
                item.title
              }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="商品ID" field="goodsId">
            <div class="w-full">
              <a-input v-model="form.goodsId" placeholder="请输入" @blur="onGoodsIdChange" />
            </div>
          </a-form-item>
          <a-form-item hide-label field="detail" v-if="goodsDetailData">
            <div class="w-full bg-theme-5 flex mt-20 round-16 p-20 mr-14 m-relative">
              <a-image width="120" height="120" class="mr-14" :src="goodsDetailData.picUrl"></a-image>
              <div class="flex-1 flex-col flex-j-b">
                <div class="font-bold text-overflow-2">{{ goodsDetailData.title }}</div>
                <span>价格：￥{{ goodsDetailData.originalPrice }}</span>
                <span>优惠券：￥{{ goodsDetailData.couponPrice }}</span>
                <span>券后价：{{ goodsDetailData.actualPrice }}</span>
                <span>佣金比例：￥{{ goodsDetailData.commissionRate }}%</span>
              </div>
              <span
                v-if="!goodsMaterialDetailData.value || JSON.stringify(goodsMaterialDetailData.value) == '[]'"
                class="m-absolute l-40 font-bold"
                style="color: red; top: -30px"
                >该商品暂无素材,请重新选择商品</span
              >
            </div>
          </a-form-item>
          <a-form-item hide-label field="material" v-if="goodsMaterialDetailData && goodsMaterialDetailData.length > 0">
            <div class="flex flex-wrap w-full">
              <div class="bg-theme-5 round-16 mr-10 p-10 h-fit" v-for="item in goodsMaterialDetailData" :key="item.id">
                <div class="multiline">{{ item.detail }}</div>
                <div class="mt-10 flex flex-wrap" v-if="item.img && item.img.length > 0">
                  <a-image
                    v-for="(item2, index2) in item.img"
                    class="mr-10"
                    :key="index2"
                    :src="item2.imgUrl"
                    width="40"
                    height="40"
                    fit="cover"
                  ></a-image>
                </div>
              </div>
            </div>
          </a-form-item>
          <div class="w-full h-20n"></div>
        </a-form>
      </a-scrollbar>
    </div>
    <div
      class="m-absolute w-full b-0 py-m pl-20 bgfff z-index-10"
      style="box-shadow: 0 -5px 8px -5px rgba(0, 0, 0, 0.1)"
    >
      <a-space>
        <a-button @click="resetForm">
          <template #icon>
            <icon-delete />
          </template>
          <template #default> 清除 </template>
        </a-button>
        <a-button @click="onChange" type="primary">
          <template #icon>
            <icon-check />
          </template>
          <template #default> 选择 </template>
        </a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { goodsDetails, linkSelect, goodsMaterialDetails } from '@/apis'
import { reAssign } from '@/utils/common'
import { Message } from '@arco-design/web-vue'
import { usePlatform } from '@/hooks'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const goodsDetailData = ref()
const goodsMaterialDetailData = ref()
const formRef = ref()
const form = reactive({
  platformId: undefined,
  goodsId: undefined
})
/* 获得平台分类 */
const { platformList, getPlatformList } = usePlatform()
getPlatformList()
// 重置表单
const resetForm = async () => {
  reAssign(form, { platformId: 1 })
  goodsDetailData.value = null
  goodsMaterialDetailData.value = null
}

const getGoodsDetails = async () => {
  const res = await goodsDetails(form)
  const res2 = await goodsMaterialDetails(form)
  goodsDetailData.value = res.data
  goodsMaterialDetailData.value = res2.data
}
const onPlatformIdChange = async (e) => {
  if (!e || !form.goodsId) return
  getGoodsDetails()
}
const onGoodsIdChange = (e) => {
  if (!e.target.value || !form.platformId) return
  getGoodsDetails()
}
watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 5 && !!newValue.link) {
      const str = decodeURIComponent(newValue.link)
      const goodsId = str.match(/goodsId=([^&]*)/)[1]
      const platformId = str.match(/platformId=([^&]*)/)[1]
      form.goodsId = goodsId
      form.platformId = platformId
      getGoodsDetails()
    } else {
      resetForm()
    }
  },
  { deep: true, immediate: true }
)
// 点击选择
const onChange = async () => {
  if (!goodsDetailData.value || !goodsMaterialDetailData.value || JSON.stringify(goodsMaterialDetailData.value) == '[]')
    return Message.error('未选择商品或选择商品暂无素材,请重新选择商品')
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      goodsId: goodsDetailData.value.goodsId,
      title: goodsDetailData.value.title,
      activityId: goodsDetailData.value.activityId,
      platformId: goodsDetailData.value.platformId,
      supplierCode: goodsDetailData.value.supplierCode
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>
<style lang="scss" scoped>
.arco-scrollbar {
  height: 100%;
}
.bg-theme-5 {
  background-color: rgba(var(--primary-6), 0.05);
}
.multiline {
  white-space: pre-line;
}
.h-fit {
  height: fit-content;
}
</style>
